<template>
	<view class="home_page">
		<u-navbar title="天慧宝贝乐园" :is-back="false"></u-navbar>
		<view class="bg_home">
			<image src="/static/home/bann.png" mode="widthFix"></image>
		</view>
		<view class="course">
			<view class="right" v-for="(item,index) in coures_list" :key="index">
				<image :src="'/static/home/' + item.im_url + '.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="course">
			<view class="right" style="width: 48.9%;" v-for="(item,index) in coures_list_1" :key="index">
				<image :src="'/static/home/' + item.im_url + '.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="ti_bg" v-if="userInfo.cource_team_id > 0">
			<image src="/static/home/bgr.png" class="bg_img"></image>
			<view class="tiele">
				<image src="/static/home/ty.png" class="ty"></image>
				<image src="/static/home/txt.png" class="tex"></image>
				<image src="/static/home/tbg.png" class="bgs"></image>
			</view>
			<view class="context">01  第1天坐姿、执笔姿势和控笔训练 </view>
			<view class="btn">
				<image src="/static/home/btn.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="b_list" v-if="userInfo.cource_team_id > 0">
			<product_list/>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import { cour_teamrank } from '@/core/api/index.js'
	export default{
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		onLoad() {
			this.cour_teamrank()
		},
		data(){
			return{
			     coures_list:[
					 {
						 im_url:"left"
					 },
					 {
						 im_url:"right"
					 }
				 ],
			     coures_list_1:[
					 {
						 im_url:"join"
					 },
					 {
						 im_url:"barrier"
					 }
				 ]
			}
		},
		methods:{
			async cour_teamrank(){
				const { _data } = await cour_teamrank({cource_level_id:1})
				this.corlist = _data
			}
		}
	}
</script>

<style lang="scss">
	::v-deep{
		.u-navbar{
			background: linear-gradient(180deg, rgba(214, 227, 255, 1) 70%, rgba(255, 255, 255, 0.01) 100%) !important;
		}
	}
	.home_page{
		padding: 10rpx 15rpx;
		.bg_home{
			width:100%;
			margin: 0 auto;
			image{
				width: 100%;
				height: auto;
			}
		}
		.course{
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 10rpx 16rpx;
			.right , .left{
				width: 49%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.ti_bg{
			margin: 0rpx auto;
			padding: 20rpx 15rpx 0;
			width: 100%;
			height: 233.12rpx;
			z-index: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			.bg_img{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0%;
				z-index: -1;
			}
			.tiele{
				// padding: 30rpx 0 20rpx;
				display: flex;
				position: relative;
				align-items: center;
				.ty{
					width: 54.64rpx;
					height: 54.64rpx;
				}
				.tex{
					width: 173.65rpx;
					height: 47.36rpx;
				}
				.bgs{
					position: absolute;
					width: 240.36rpx;
					height: 17.76rpx;
					z-index: -1;
					bottom: 30%;
					transform: translate(-50%, 0);
					/* rig: ; */
					left: 50%;
				}
				.context{
					font-size: 32.57rpx;
					font-weight: 600;
					margin-top: 5rpx;
					color: #000;
				}
			}
			.btn{
				width: 237.23rpx;
				// height: 50.85rpx;
				image{
					width: 100%;
					height: auto;
				}
			}
		}
		.b_list{
			margin-top: -25rpx;
			z-index: -1;
		}
	}
</style>